<template>
	<view class="laytout_feature">
		<view class="feature_title">
			<text>功能列表</text>
		</view>
		<view class="layout_content_store" v-if="isStore">
			<view class="content_item" v-for="item in list" @click="goToPage(item.path)">
				<uni-icons :type="item.icon" :size="content_item_sieze"></uni-icons>
				<text class="item_desc">{{item.title}}</text>
			</view>
		</view>
		<view class="layout_content_store" v-else>
			<view class="content_item" v-for="item in list" @click="goToPage(item.path)">
				<uni-icons :type="item.icon" :size="content_item_sieze"></uni-icons>
				<text class="item_desc">{{item.title}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as functionList from '../../commons/myPage/MyFunctionList.js'

const isStore = ref(false)
const list = ref([])
const content_item_sieze = 40

// 点击图标页面跳转
const goToPage = (path)=>{
	uni.navigateTo({
		url:path
	})
}

onMounted(()=>{
	list.value = functionList.functionList
	if(isStore.value){
		list.value = list.value.isStore
	}else{
		list.value = list.value.isMember
	}
})


</script>

<style lang="scss" scoped>
.laytout_feature{
			width: 100%;
			height: 100%;
			.feature_title{
				margin-top: 20rpx;
				font-size: 34rpx;
				font-weight: 600;
			}
			.layout_content_store{
				margin-top: 20rpx;
				height: auto;
				display: grid;
				grid-template-columns: repeat(4,1fr);
				.content_item{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-bottom: 15rpx;
					.item_desc{
						font-size: 24rpx;
						font-weight: 300;
					}
				}
			}
		}
</style>